<template>
    <view>
        <view class="movie-position" @click="handleNav()">
            <view class="position-text">{{cinemaInfo.cinemaName}}</view>
            <view class="position-item">
                <view class="item-texts">{{cinemaInfo.address}}</view>
                <view class="item-img-list">
                    <!-- <image :src="$imgUrl+'images/collection-icon.png'" class="collion"></image> -->
                    <image :src="$imgUrl+'images/moivew-location.png'" class="locaion-img"></image>
                </view>
            </view>
        </view>
        <!-- 轮播盒子 start -->
        <view class="swiper_main">
            <image class="background-img-vague" :src="chooseMovice.pic" mode=""></image>
            <view class="wrap">
                <swipers :list="movieList" height="260" mode="none" name="pic" :autoplay="false" img-mode="scaleToFill" class="swiper_bg" :effect3d="true"
                    bg-color="none" :circular="false" effect3d-previous-margin="280" @change="setBackground" @click="setBackground" :current="swiperCurrent"></swipers>
            </view>
            <div class="box"></div>
        </view>
        <!-- 轮播盒子 end -->

        <view class="moive-name" v-if="chooseMovice.name">{{chooseMovice.name}} <text class="grade">{{ chooseMovice.grade }}分</text></view>
        <view class="moive-info" v-if="chooseMovice.duration">{{chooseMovice.duration}}分钟|{{chooseMovice.filmTypes}}|{{chooseMovice.cast}}</view>

        <view class="moive-tab-list">
            <view class="tabs-list-item" :class="{'tab-sel' : index==tabIndexs}" v-for="(value,index) in tabLists" :key="index" @click="getTimeTab(value,index)">
                {{value.time}}
                <view class="bottoms" v-if="index==tabIndexs"></view>
            </view>
        </view>
        <view v-for="(item,i) in tabLists" v-show="i==tabIndexs">
            <view class="ticket-list" v-for="(value,index) in item.list" :key="index">
                <view style="width: 79%;">
                    <view class="ticet-left">
                        <view style="display: flex;align-items: center;">
                            <text class="left-time">{{getTime(value.showTime)}}</text>
                            <text class="left-type">{{value.planType}}</text>
                        </view>
                        <view style="display: flex;align-items: center;">
                            <view class="ret-price"><text>￥</text>{{((value.netPrice / 100) * (ratio / 100)).toFixed(2)}}</view>
                            <view class="ret-yuans">¥{{value.netPrice/100}}</view>
                        </view>
                    </view>
                    <view class="ticet-left" style="margin-top: 20rpx;">
                        <view class="ticet-booms">
                            <text>{{getTime(value.stopSellTime)}}散场</text>
                            <!-- stopSellTime -->
                            <text style="margin-left: 25rpx;">{{value.hallName}}</text>
                        </view>
                        <view class="ticet-boom-ret">
                            <view class="sheng-text">省</view>
                            <view class="sheng-pirce">¥{{province((value.netPrice/100).toFixed(2),((value.netPrice / 100) * (ratio /
                                100)).toFixed(2))}}</view>
                        </view>
                    </view>
                </view>
                <view class="buy-btns" v-if="value.stopSellTime> Math.floor(Date.now() / 1000)" @click="getGou(value)">购票</view>
                <view class="buy-btns gray" v-else>停售</view>

            </view>
            <view v-if="!(tabLists[tabIndexs].hasMoreData) && item.list.length>0" class="cu-load over"></view>
            <view v-if="item.list.length==0" style="text-align: center;padding-top: 30rpx;font-size: 28rpx;">暂无排片！</view>
        </view>
        <!-- isLoad&& -->

    </view>
</template>

<script>
import swipers from '../components/u-swiper.vue'
// import {filmList,filmScheduling} from "@/api/film.js"
import config from "@/utils/config.js"

import { getMovieList, getMovieDateList, getCinemaScheduleList, getComingMovieList, getData } from "@/api/movie.js"
export default {
    components: { swipers },
    data() {
        return {
            movieList: [
            ],//选中的电影
            chooseMovice: {
            },
            //swiper默认选中
            swiperCurrent: 0,
            tabIndexs: 0,
            cinemaInfo: {},//影院信息
            tabLists: [
                // {
                //     time: "05-14",
                //     list: [
                //         {
                //             duration: 149,
                //             hallName: "2号厅-口罩自备",
                //             movieId: 146629,
                //             showId: "MjUyNDkjQGltYW5tQCMxNDY2MjkjQGltYW5tQCMxNjUyNTI4NDAwI0BpbWFubUAjMTA5I0BpbWFubUAjNDk=",
                //             showPrice: 25.9,
                //             showTime: "2022-05-14 19:40:00",
                //             showVersionType: "国语 2D",
                //             stopSellTime: "2022-05-14 18:25:00",
                //             userPrice: 22.5,
                //         },
                //         {
                //             duration: 149,
                //             hallName: "7号厅-口罩自备",
                //             movieId: 146629,
                //             showId: "MjUyNDkjQGltYW5tQCMxNDY2MjkjQGltYW5tQCMxNjUyNTIzMDAwI0BpbWFubUAjMTA5I0BpbWFubUAjNDk=",
                //             showPrice: 24.9,
                //             showTime: "2022-05-14 18:10:00",
                //             showVersionType: "国语 2D",
                //             stopSellTime: "2022-05-14 16:55:00",
                //             userPrice: 21.7,
                //         }
                //     ]
                // }
            ],
            isLoad: false,
            $imgUrl: this.$imgUrl,
            movieId: '',
            currentPage: 1,
            limit: 10,
            isLoading: false,
            hasMoreData: true,
            selectedDate: '',
            scheduleList: [],
            ratio: 0,
        }
    },
    onLoad(option) {
        // this.swiperCurrent = 0
        // this.movieId = option.movieId
        if (option) {
            this.movieId = option.movieId
            this.cinemaInfo = JSON.parse(decodeURIComponent(option.item));
            console.log(this.cinemaInfo, 111)
            uni.setNavigationBarTitle({
                title: this.cinemaInfo.cinemaName
            })
            if (this.movieId || this.cinemaInfo) {
                this.$loading()
                let fun = [
                    getMovieList({ city_id: uni.getStorageSync("cityId") }),
                    getComingMovieList({ city_id: uni.getStorageSync("cityId") }),
                    getCinemaScheduleList({ city_id: uni.getStorageSync("cityId"), cinema_id: this.cinemaInfo.cinemaId }),
                    getData()
                ]
                Promise.all(fun).then(res => {
                    this.movieList = [...res[0].data, ...res[1].data]
                    let index = this.movieList.findIndex(item => item.filmId == this.movieId)
                    if (index != -1) {
                        this.chooseMovice = this.movieList[index]
                        this.swiperCurrent = index
                    } else {
                        this.chooseMovice = this.movieList[0]
                    }
                    this.scheduleList = res[2].data
                    this.ratio = res[3].data.ratio
                    this.getList()
                })
                this.$hideLoading()
            }
        }
    },
    methods: {
        getList() {
            // this.movieId
            getMovieDateList({
                movie_id: this.movieId,
                city_id: this.cinemaInfo.cityId
            }).then(res => {
                if (res.code == 1) {
                    this.tabLists = []
                    res.data.forEach(e => {
                        this.tabLists.push({
                            time: e,
                            hasMoreData: true,
                            list: []
                        })
                    });
                    if (this.tabLists.length > 0) {
                        this.selectedDate = this.tabLists[0].time
                        this.loadMoreData()
                    }
                }
            })
        },
        loadMoreData() {
            this.$loading();
            const selectedTab = this.tabLists[this.tabIndexs];
            // Filter scheduleList for the selected date and add to the list
            for (const scheduleItem of this.scheduleList) {
                if (scheduleItem.showDate === this.selectedDate && scheduleItem.filmName == this.chooseMovice.name) {
                    selectedTab.list.push(scheduleItem);
                }
            }
            // Indicate that no more data is available if the list length is 0
            selectedTab.hasMoreData = selectedTab.list.length > 0;
            this.$hideLoading();
        },
        // 切换轮播改变背景
        setBackground(index) {
            this.swiperCurrent = index
            this.chooseMovice = this.movieList[index]
            this.movieId = this.movieList[index].filmId
            this.getList()
            // this.getScheduling()
        },
        getTimeTab(data, index) {
            this.selectedDate = data.time;
            this.currentPage = 1;
            this.limit = 10;
            this.tabIndexs = index;
            this.tabLists[index].list = [];
            this.loadMoreData();
        },
        getTime(time) {
            return config.formattedDate(time)
        },
        getGou(data) {
            data.ratio = this.ratio
            data.address = this.cinemaInfo.address
            data.latitude = this.cinemaInfo.latitude
            data.longitude = this.cinemaInfo.longitude
            let _this = this
            uni.navigateTo({
                url: '/pagesB/movie/seat?item=' + encodeURIComponent(JSON.stringify(data)) + '&cinemaId=' + this.cinemaInfo.cinemaId,
                success(res) {
                    res.eventChannel.emit('moviceDataFrom', { data: _this.chooseMovice })
                }
            })
        },
        province(original, price) {
            let val = original - price
            return Math.floor(val * 100) / 100
        },
        handleNav() {
            uni.openLocation({
                latitude: Number(this.cinemaInfo.latitude), // 纬度
                longitude: Number(this.cinemaInfo.longitude), // 经度
                name: this.cinemaInfo.cinemaName,
                address: this.cinemaInfo.address,
                scale: 15,
            })
        }
    }
}
</script>

<style lang="less">
// 轮播图中间
.swiper_main {
  position: relative;
  height: 324rpx;
  overflow: hidden;

  .background-img-vague {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    // transform: translateX(-50%);
    filter: blur(15px);
    -webkit-filter: blur(15px);
  }

  /deep/.u-swiper-item {
    width: 193rpx !important;
    height: 260rpx !important;
  }

  // 影院背景图
  .moviebg {
    width: 100%;
    height: 100%;
    filter: blur(10rpx);
  }

  .wrap {
    position: absolute;
    left: 0;
    top: 26rpx;
    right: 0;
    margin: 0 auto;
  }

  .box {
    width: 0;
    height: 0;
    border: 10rpx solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(135deg);
    position: absolute;
    bottom: -10rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
.movie-position {
  padding: 30rpx 32rpx;
  .position-text {
    color: #2d3039;
    font-size: 32rpx;
    font-weight: 550;
  }
  .position-item {
    display: flex;
    margin-top: 10rpx;
  }
  .item-texts {
    color: #636775;
    font-size: 24rpx;
    width: 72%;
  }
  .item-img-list {
    margin-left: auto;
    display: flex;
    // align-items: center;
    .collion {
      width: 48rpx;
      height: 48rpx;
      margin-right: 50rpx;
    }
    .locaion-img {
      width: 44rpx;
      height: 44rpx;
    }
  }
}
.moive-name {
  text-align: center;
  margin-top: 30rpx;
  color: #2d3039;
  font-size: 36rpx;
  font-weight: 600;
  .grade {
    color: #ff6e06;
    font-size: 28rpx;
  }
}
.moive-info {
  text-align: center;
  margin-top: 14rpx;
  color: #636775;
  font-size: 24rpx;
  padding: 0 10rpx;
}

.moive-tab-list {
  margin-top: 40rpx;
  padding: 24rpx 12rpx;
  border-bottom: 2rpx solid #dfe0e2;
  overflow-x: auto;
  white-space: nowrap;
  width: auto;
  overflow-y: hidden;
  .tabs-list-item {
    padding: 0rpx 20rpx;
    display: inline-block;
    position: relative;
    color: #636775;
    font-size: 28rpx;
  }
  .tab-sel {
    color: #fe602b !important;
    font-size: 28rpx;
    font-weight: 550;
  }
  .bottoms {
    position: absolute;
    bottom: -30rpx;
    right: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52rpx;
    height: 8rpx;
    background-color: #fe602b;
    // border-radius: 5rpx 5rpx 0px 0px;
  }
}

.ticket-list {
  margin: 0rpx 32rpx;
  padding: 38rpx 0rpx;
  border-bottom: 2rpx solid #e0e1e3;
  display: flex;
  align-items: center;
  .ticet-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-time {
      color: #2d3039;
      font-size: 42rpx;
    }
    .left-type {
      color: #2d3039;
      font-size: 28rpx;
      margin-left: 32rpx;
    }
  }
  .ret-price {
    color: #fe602b;
    font-size: 42rpx;
    font-weight: 550;
    text {
      font-size: 28rpx;
    }
  }
  .ret-yuans {
    color: #a6a8ae;
    font-size: 28rpx;
    margin-left: 13rpx;
    text-decoration: line-through;
  }
}
.ticet-booms {
  color: #a6a8ae;
  font-size: 24rpx;
}
.ticet-boom-ret {
  display: flex;
  align-items: center;
  .sheng-text {
    padding: 0rpx 8rpx;
    height: 30rpx;
    line-height: 30rpx;
    background-color: #3db97c;
    border-radius: 4rpx;
    color: #ffffff;
    font-size: 20rpx;
    text-align: center;
    margin-right: 12rpx;
  }
  .sheng-pirce {
    color: #a6a8ae;
    font-size: 24rpx;
  }
}
.buy-btns {
  width: 110rpx;
  height: 58rpx;
  text-align: center;
  line-height: 58rpx;
  background: linear-gradient(207deg, #ff9272 0%, #fc5421 100%);
  border-radius: 30rpx;
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 550;
  margin-left: auto;
  &.gray {
    background: none;
    background-color: #cccccc;
  }
}
</style>
